<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            body{margin: 0;padding: 0;}
            .wrapper{color: white;}
            video{position: fixed;
                right: 0px;
                bottom: 0px;
                height: auto;
                width: auto;
                z-index: -9999;
                left: -10%;}
                .title{width: 750px;height: 75px;;margin-left: 450px}
                .items{
                    float: left;display: inline-block;margin-right: 20px;
                }
            .items1{
                float: left;display: inline-block;margin-right: 20px;
            }
            .icons{margin-left: -50px;margin-top: 10px;display: block;height: 135px;display: none;}
            .icon{width: 100%;margin-top: 0px;height: 40px;text-align: center}
            img{height: 10px;width: 10px;margin-left: 3px;}
            .items1:hover .icons{display: block}
            .icon:hover{background-color: #e6e6e6;}
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="video-bg">
                <video src="https://s3.pstatp.com/aweme/resource/web/static/image/index/tvc-v3_0b9db49.mp4" autoplay loop muted class="video-tvc"> </video>
                <ul class="title">
                    <li class="items">创作服务平台</li>
                    <li class="items">开放平台</li>
                    <li class="items1">系列产品<img src="https://s3.pstatp.com/aweme/resource/web/static/image/index/subtract_67c835d.png">
                        <ul style="list-style: none" class="icons">
                            <li class="icon">抖音火山版</li>
                            <li class="icon">剪映</li>
                            <li class="icon">多闪</li>
                        </ul>
                    </li>
                        <li class="items1">抖音直播<img src="https://s3.pstatp.com/aweme/resource/web/static/image/index/subtract_67c835d.png">
                            <ul style="list-style: none" class="icons">
                                <li class="icon">直播机构入驻</li>
                            </ul>
                        </li>
                            <li class="items1">合作入驻<img src="https://s3.pstatp.com/aweme/resource/web/static/image/index/subtract_67c835d.png">
                                <ul style="list-style: none" class="icons">
                                    <li class="icon">MCN入驻</li>
                                    <li class="icon">抖音特效师</li>
                                    <li class="icon">抖音音乐人</li>
                                    <li class="icon">社会机构入驻</li>
                                </ul>
                            </li>
                </ul>
            </div>
        </div>
    </body>
</html>